<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${userType == 'user' ? '学生管理' : '教师管理'}"></title>

    <style>
        body {
            font-family: "Helvetica Neue", sans-serif;
            margin: 30px;
            background-color: #f9f9f9;
        }
        /* <h1>   标签显示页面标题，使用 Thymeleaf 的   th:text   属性动态设置标题内容。•
        <form>   标签定义了一个表单，用于搜索用户信息。•
        <table>   标签定义了一个表格，用于显示用户列表。•
        <div class="info">   显示总记录数。
        */

        h1 {
            text-align: center;
            color: #333;
        }

        form {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }

        label {/*设置所有   <label>   标签的字体大小为 14 像素。*/
            font-size: 14px;
        }


        /*为文本输入框和数字输入框设置内边距（  padding  ）为 5 像素。•
        设置边框（  border  ）为 1 像素宽、颜色为浅灰色（  #ccc  ）的实线。•
        设置边框圆角（  border-radius  ）为 4 像素，使边框边缘圆滑。*/
        input[type="text"],
        input[type="number"] {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 6px 14px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #2c3e50;
            color: white;
            transition: background-color 0.3s ease;/*过渡效果（  transition  ）设置为背景颜色在 0.3 秒内平滑过渡*/
        }

        button:hover {
            background-color: #2c3e50;
        }/*当鼠标悬停在按钮上时，背景颜色变为深青色*/

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);/*阴影效果*/
        }

        th, td {/*th表头 td表格单元*/
            padding: 10px 12px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f0f0f0;
            color: #333;
        }

        tr:hover {
            background-color: #f5f5f5;
        }/*当鼠标悬停在表格行（tr）上时，背景颜色变为非常浅的灰色（  #f5f5f5  ）*/

        .action-btn {
            background-color: #2196F3;
            margin: 2px;/*设置操作按钮（如编辑按钮）的背景颜色为蓝色*/
        }

        .action-btn:hover {
            background-color: #1976D2;/*当鼠标悬停在操作按钮上时，背景颜色变为稍微深一些的蓝色*/
        }

        .delete-btn {
            background-color: #f44336;/*设置删除按钮的背景颜色为红色*/
        }

        .delete-btn:hover {
            background-color: #d32f2f;
        }/*当鼠标悬停在删除按钮上时，背景颜色变为稍微深一些的红色*/

        .info {
            text-align: center;
            margin-top: 10px;
        }/*设置信息文本居中对齐*/
    </style>
    <script>/*<script>标签内定义了两个 JavaScript 函数，
    分别是deleteUser(id)和editUser(id)，
    用于处理删除和编辑用户的操作。*/
        function deleteUser(id) {/*确认删除用户，并发送 DELETE 请求到服务器。*/
            if (confirm("确定要删除该用户吗？")) {
                fetch(`/user/${id}`, {
                    method: 'DELETE'
                }).then(res => res.json())
                    .then(data => {
                        if (data.code === 0) {
                            alert("删除成功");
                            location.reload();
                        } else {
                            alert("删除失败：" + data.message);
                        }
                    });
            }
        }

        function editUser(id) {/*跳转到编辑用户的页面。*/
            window.location.href = `/user/edit/${id}`;
        }
    </script>
</head>
<body>
<h1 th:text="${userType == 'user' ? '学生管理' : '教师管理'}">学生管理</h1>

<form action="/user" method="get">
    <input type="hidden" name="userType" th:value="${userType}" />
    <label>页码: <input type="number" name="pageNum" th:value="${pageNum}" min="1"></label>
    <label>每页条数: <input type="number" name="pageSize" th:value="${pageSize}" min="1"></label>
    <label>编号: <input type="text" name="username" th:value="${param.username}"></label>
    <label>名字: <input type="text" name="name" th:value="${param.name}"></label>
    <button type="submit">查询</button>
    <a th:href="@{'/user/add'(userType=${userType})}">
        <button type="button" th:text="${userType == 'user' ? '新增学生' : '新增教师'}">新增用户</button>
    </a>

</form>

<table>
    <thead>
    <tr>
        <th>ID</th>
        <th th:text="${userType == 'user' ? '学号' : '编号'}"></th>
        <th>手机号</th>
        <!-- 仅 user 类型显示学历 -->
        <th th:if="${userType == 'user'}">班级</th>

        <th>真实姓名</th>
        <th>创建时间</th>
        <th>更新时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.phone}"></td>
        <td th:if="${userType == 'user'}" th:text="${user.className}">-</td>

        <td th:text="${user.name}"></td>
        <td th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        <td th:text="${#temporals.format(user.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        <td>
            <button class="action-btn" type="button" th:onclick="'editUser(' + ${user.id} + ')'">修改</button>
            <button class="delete-btn" type="button" th:onclick="'deleteUser(' + ${user.id} + ')'">删除</button>
        </td>
    </tr>
    <tr th:if="${#lists.isEmpty(users)}">
        <td colspan="10">暂无数据</td>
    </tr>
    </tbody>
</table>

<div class="info">
    <p>总记录数: <span th:text="${total}">0</span></p>
</div>
</body>
</html>
